<template>
	<view>
		<view class="page member-update">
			<!-- 轮播图 -->
			<view class="swiper-box">
				<bw-swiper :swiperList="banners" :swiperHeight="360" :swiperWidth="580" :autoplay="false"
					:swiperType="true" :current="bannerCurrent" indicatorColor="#ededed" indicatorActiveColor="#cacaca"
					@clickItem="swiperClick" @change="swiperChange"></bw-swiper>
			</view>
			<!-- 银卡权益0，金卡权益1，白金卡权益2，钻石卡权益3 -->
			<div v-for="(item, index) in cardInfo" :key="index" v-show="bannerCurrent == index" class="rights-box">
				<!-- 会员升级/加入 -->
				<!-- <view class="part part1">
					<view class="dt">会员升级/加入</view>
					<view class="dd" v-for="(desc, index) in item.ruleList" :key="index">{{desc}}</view>
				</view> -->
				<view class="hr7"></view>
				<!-- 会员权益 -->
				<view class="part part2" style="padding-left: 0rpx;">
					<view class="dt" style="padding-left: 48rpx;">会员权益</view>
					<image v-if="item.equity_img" class="equity_img" :src="imgPath + item.equity_img" mode="widthFix">
					</image>
					<!-- <view v-for="(sub, index) in item.equityList" :key="index" class="dd flex-row-start">
						<view class="i">{{sub.word}}</view>
						<rich-text :nodes="sub.title + sub.info"></rich-text>
					</view> -->
				</view>

				<!-- 协议 -->
				<view class="part part3" v-if="mode == 'update'">以上权益仅限于会员本人享受</view>
				<!--  -->
				<view style="padding: 0rpx 40rpx;" v-if="mode == 'update'">
					<view class="check-box flex-row-start" :class="{ checked: agreement }" @click="toggleCheck"
						style="margin-top: 0;">
						<view class="inner"></view>
						<text class="info">我已经阅读并同意</text>
						<text class="info font-link" @click.stop="openAgree">《璞廷会会员协议》</text>
					</view>

					<view @click="Onfictitious(item1)" class="check-box flex-row-start"
						:class="fictitious_id == item1.id?'checked':''" v-for="(item1,index1) in item.fictitious_list"
						:key="index1">
						<view class="inner"></view>
						<text class="info font-link" @click.stop="openAgree2(item1)">{{item1.name}}</text>
						<text class="info">{{item1.price}}元</text>
					</view>
				</view>
				<view class="part part3" style="margin: 20rpx 0 -20rpx 0;">尊享权益可选(二选一)</view>
				<!-- v-if="mode == 'update'" -->
				<view style="padding: 0rpx 40rpx;">
					<view @click="Onfictitioustwo(item1)" class="check-box flex-row-start"
						:class="fictitious_two_id == item1.id?'checked':''"
						v-for="(item1,index1) in item.fictitious_two_list" :key="index1">
						<view class="inner"></view>
						<text class="info font-link" @click.stop="openAgree2(item1)">{{item1.name}}</text>
						<!-- <text class="info">{{item1.price}}元</text> -->
					</view>
					<view class="flex-row-start flex-wrap">
						<view @click="OncouponActivity(item1)" class="check-box flex-row-start" style="width: 50%;"
							:class="coupon_activity_id == item1.id?'checked':''"
							v-for="(item1,index1) in item.coupon_activity_list" :key="index1">
							<view class="inner"></view>
							<text class="info">{{item1.name}}</text>
						</view>
					</view>
				</view>
			</div>
		</view>
		<!-- 按钮 -->
		<block v-if="mode == 'update'" v-for="(item, index) in cardInfo" :key="index">
			<view class="fix-bottom-btn flex-row-center" v-show="bannerCurrent == index && item.update_btn_show == 1">
				<view class="btn flex-row-center font-ffffff font15" @click="submit(item)">
					{{this.Onprice(this.fictitious_price,this.price,this.fictitious_two_price)}}元 立即升级
				</view>
			</view>
		</block>
		<block v-if="mode == 'create'" v-for="(item, index) in cardInfo" :key="index">
			<view class="fix-bottom-btn flex-row-center" v-show="bannerCurrent == index && item.regist_btn_show == 1">
				<view class="btn flex-row-center font-ffffff font15" @click="goNext(item.id, mode)">立即注册</view>
			</view>
		</block>

		<!-- 协议弹窗 -->
		<uni-popup ref="rule" type="center">
			<view class="popup-rule">
				<view class="title font15 tc">璞廷会会员协议</view>
				<scroll-view class="content" :scroll-y="true">
					<rich-text :nodes="agreementRich"></rich-text>
				</scroll-view>
				<view class="btn-long" @click="closeAgree">知道了</view>
			</view>
		</uni-popup>
		<!-- 协议弹窗2 -->
		<uni-popup ref="rule2" type="center">
			<view class="popup-rule">
				<view class="title font15 tc">增值权益</view>
				<scroll-view class="content" :scroll-y="true">
					<rich-text :nodes="rule2s"></rich-text>
				</scroll-view>
				<view class="btn-long" @click="closeAgree2">知道了</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import bwSwiper from '@/components/bw-swiper/index.vue'
	export default {
		components: {
			bwSwiper
		},
		data() {
			return {
				mode: '', // 注册create，升级update
				updateId: '', // 需要升级到的卡片id
				cardInfo: [],
				banners: [],
				bannerCurrent: 0,
				imgPath: this.$Config.http_static, // 图片头

				agreement: false, // 是否接受协议
				agreementRich: '', // 协议内容
				fictitious_id: '', //升级权益
				fictitious_price: 0,
				fictitious_two_id: '',
				fictitious_two_price: 0,
				rule2s: '',
				coupon_activity_id: '',
				idInfo: {},
				idInfo_origin: {}, // 原始的id信息
				wx_code: '',
				wxSdk: false, // h5是否签名成功（此页面用于支付）
				price: 0,
				userInfo: {},
			}
		},
		onLoad(options) {

			this.idInfo = uni.getStorageSync('idInfo')
			this.idInfo_origin = uni.getStorageSync('idInfo_origin')

			// 类型：注册/升级
			this.mode = options.mode
			this.updateId = options.updateId ? options.updateId : ''
			// 注册展示的卡片
			if (this.mode == 'create') {
				this.Getcard('', options)
			}
			// 升级展示的卡片
			if (this.mode == 'update') {
				this.$Http({
					url: 'user',
					token: true
				}).then(res => {
					this.userInfo = res.data
					this.Getcard(res.data.user.my_level, options)
				})
			}

			// 获取协议
			this.$Http({
				url: 'agreement'
			}).then(res => {
				if (res.code == 1) {
					this.agreementRich = res.data
				}
			});
		},
		methods: {
			Getcard(my_level, options) {
				this.$Http({
					url: 'card',
					data: {
						my_level: my_level,
						type: this.mode == 'create' ? 1 : 2
					}
				}).then(res => {
					let arr = []; // 显示的卡片
					if (this.mode == 'create') {
						res.data.forEach(item => {
							if (item.regist_ui_show == 1) {
								arr.push(item)
							}
						})
					}
					if (this.mode == 'update') {
						res.data.forEach(item => {
							if (item.update_ui_show == 1) {
								arr.push(item)
							}
							if (my_level == '银卡') {
								if (item.name == '白金卡') {
									item.price = Number(res.data[0].price) + Number(item.price)
								}
							}
						})
					}

					// arr.push(res.data[0])

					// 轮播需要的卡片数据处理
					arr.forEach((item, index) => {
						this.banners.push({
							img: this.$Config.http_static + item.card_img
						})
						if (options.updateId && item.id.toString() == options.updateId.toString()) {
							this.bannerCurrent = index
						}
					})
					if (this.mode == 'create') {
						this.banners = [this.banners[0]]
					}
					if (arr.length > 0 && arr[0].fictitious_list && arr[0].fictitious_list.length > 0) {
						this.Onfictitious(arr[0].fictitious_list[0])
					}
					this.cardInfo = arr
					this.price = this.cardInfo[0].price
				});
			},
			// 轮播图change
			swiperChange(e) {
				let index = e.detail.current
				this.bannerCurrent = e.detail.current
				if (this.cardInfo[index].fictitious_list && this.cardInfo[index].fictitious_list.length > 0) {
					this.Onfictitious(this.cardInfo[index].fictitious_list[0])
				}
				this.coupon_activity_id = ''
				this.price = this.cardInfo[index].price
			},
			// 去注册/升级
			goNext(id, mode) {
				let param = {
					cardId: id,
					mode: mode
				}
				uni.setStorage({
					key: 'updateInfo',
					data: param
				})

				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/common/registerM?tid=' + this.fictitious_two_id + '&aid=' + this
						.coupon_activity_id
				});
				// #endif

				// #ifdef H5
				uni.setStorage({
					key: 'firstType',
					data: true
				})
				window.location.href = this.$Config.http_h5_url + '/pages/common/registerM?tid=' + this.fictitious_two_id +
					'&aid=' + this.coupon_activity_id
				// #endif
			},

			Onfictitious(item) {
				if (this.fictitious_id == item.id) {
					this.fictitious_id = null
					this.fictitious_price = 0
				} else {
					this.fictitious_id = item.id
					this.fictitious_price = item.price
				}
			},
			Onfictitioustwo(item) {
				if (this.fictitious_two_id == item.id) {
					this.fictitious_two_id = null
					this.fictitious_two_price = 0
				} else {
					this.fictitious_two_id = item.id
					this.fictitious_two_price = item.price
					this.coupon_activity_id = ''
				}
			},
			// 协议勾选
			toggleCheck() {
				this.agreement = !this.agreement
			},
			// 打开协议
			openAgree() {
				this.$refs.rule.open()
			},
			openAgree2(res) {
				this.rule2s = res.content
				this.$refs.rule2.open()
			},
			// 关闭协议
			closeAgree() {
				this.$refs.rule.close()
			},
			closeAgree2() {
				this.$refs.rule2.close()
			},
			OncouponActivity(row) {
				if (this.coupon_activity_id == row.id) {
					this.coupon_activity_id = ''
				} else {
					this.coupon_activity_id = row.id
					this.fictitious_two_id = null
					this.fictitious_two_price = 0
				}

			},
			Onprice(value1, value2, value3) {
				let text = 0
				text = (value1 * 100) + (value2 * 100) + (value3 * 100)
				text = text / 100
				// console.log(this.userInfo ,0)
				// if (this.userInfo && this.userInfo.user && this.userInfo.user.my_level) {
				// 	console.log(1)
				// 	if (this.userInfo.user.my_level == '银卡') {
				// 		console.log(this.banners,this.bannerCurrent)
				// 		if (this.banners[this.bannerCurrent].name == '白金卡') {
				// 			console.log(3)
				// 			text = text + Number(this.banners[0].price)
				// 		}
				// 	}
				// }
				text = text.toFixed(2)
				return text
			},
			// 提交表单
			submit(row) {
				let that = this

				if (!this.agreement) {
					uni.showToast({
						title: '请阅读并同意会员协议',
						icon: 'none'
					});
					return false;
				}

				if ((row.fictitious_two_list && row.fictitious_two_list.length > 0) || (row.coupon_activity_list && row
						.coupon_activity_list.length > 0)) {
					if (!this.coupon_activity_id && !this.fictitious_two_id) {
						uni.showToast({
							title: '请选择尊享权益！',
							icon: 'none'
						});
						return false;
					}
				}


				let updateData = {
					p_user_id: this.idInfo_origin ? this.idInfo_origin.Fid : this.idInfo.Pid,
					crs_level: row.crs_level,
					code: '',
					fictitious_id: this.fictitious_id ? this.fictitious_id : '',
					coupon_activity_id: this.coupon_activity_id ? this.coupon_activity_id : '',
					fictitious_two_id: this.fictitious_two_id ? this.fictitious_two_id : '',
				}

				this.$Http({
					url: 'cardUpgrade',
					data: updateData,
					token: true,
					type: 'GET',
				}).then(res => {
					if (res.code == 1) {
						// 重新获取code
						wx.login({
							success: res3 => {
								that.wx_code = res3.code
								if (row.price != '0.00') {
									if (res.data.order_id != '') {
										// 获取支付参数
										let $obj = {
											type: 'card',
											order_id: res.data.order_id,
											os: that.group == 'wxapp' ? 'WxApp' : 'H5'
										}
										// #ifdef H5
										$obj.openid = that.openid
										// #endif
										// #ifdef MP-WEIXIN
										$obj.code = that.wx_code
										// #endif
										that.$Http({
											url: 'paySign',
											data: $obj,
										}).then(res1 => {
											if (res1.code == 1) {
												that.Onpay(res1.data)
											} else {
												uni.showToast({
													title: res1.msg,
													icon: 'none'
												});
											}
										});
									} else {
										that.$base.Onpageurl()
									}
								} else {
									that.$base.Onpageurl()
								}
							}
						})
					} else if (res.code == 500) {
						uni.showToast({
							title: '接口异常，请稍后再试',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 支付
			Onpay(param) {
				var that = this
				// #ifdef MP-WEIXIN
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: param.timeStamp,
					nonceStr: param.nonceStr,
					package: param.pacKage,
					signType: 'MD5',
					paySign: param.paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功'
						});
						uni.removeStorageSync("idInfo_origin");
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/index'
							})
						}, 2000)
					},
					fail: function(err) {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/index'
							})
						}, 2000)
					}
				});
				// #endif
				// #ifdef H5
				if (that.wxSdk) {
					this.$wxapi.OnWXPay(param).then(res => {
						console.log('OnWXPay返回：' + JSON.stringify(res))
						if (res.code == 1) {
							uni.showToast({
								title: '支付成功'
							});
						} else if (res.code == 0) {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						} else if (res.code == 3) {
							uni.showToast({
								title: '支付取消',
								icon: 'none'
							});
						}
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/index'
							})
						}, 2000)
					})
				} else {
					uni.showToast({
						title: '微信签名失败',
						icon: 'none'
					});
				}
				// #endif
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");

	.equity_img {
		width: 750rpx;
	}
</style>